<template>
    <div class="loginBody">
        <div class="loginDiv">
            <div class="login-content">
                <el-form :model="loginForm" label-width="50px"
                         :rules="rules" ref="loginForm" class="form-flex">

                    <el-form-item prop="studentId">
                        <el-input style="width: 200px" suffix-icon="el-icon-user-solid"
                                  placeholder="请输入账号" type="text" v-model="loginForm.studentId"
                                  autocomplete="off" size="small" class="input-flex"></el-input>
                    </el-form-item>

                    <el-form-item prop="password">
                        <el-input style="width: 200px" placeholder="密码"
                                  type="password" v-model="loginForm.password"
                                  show-password autocomplete="off" size="small" class="input-flex"
                                  @keyup.enter.native="confirm"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="danger" @click="confirm" :disabled="confirm_disabled" round>登 录</el-button>
                    </el-form-item>
                </el-form>

            </div>
        </div>
    </div>
</template>


<script>
    import {serverIp} from "../../public/config";

    export default {
        name: "Login",
        data() {
            return {
                serverIp:serverIp,
                confirm_disabled: false,
                loginForm: {
                    studentId: '',
                    password: ''
                },
                rules: {
                    studentId: [
                        {required: true, message: '请输入账号', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输密码', trigger: 'blur'}
                    ],
                }
            }
        },
        methods: {

            confirm() {
                this.confirm_disabled = true;
                this.$refs.loginForm.validate((valid) => {
                    if (valid) { //valid成功为true，失败为false
                        //去后台验证用户名密码
                        this.$axios.post('http://'+ serverIp +':8090/users/login', this.loginForm)
                            .then(res => res.data)
                            .then(res => {
                                console.log(res);
                                if (res.code == 200) {
                                    //存储
                                    sessionStorage.setItem("CurUser", JSON.stringify(res.data.users))

                                    console.log(res.data.menu);
                                    this.$store.commit("setMenu", res.data.menu)
                                    //跳转到主页
                                    this.$router.replace('/Index');
                                } else {
                                    this.confirm_disabled = false;
                                    alert('校验失败，用户名或密码错误！');
                                    return false;
                                }
                            });
                    } else {
                        this.confirm_disabled = false;
                        console.log('校验失败');
                        return false;
                    }
                });

            }
        }
    }
</script>

<style scoped>

    .form-flex {
        display: flex;
        justify-content: center;
    }


    .loginBody {
        position: absolute;
        width: 100%;
        height: 100%;
        background-image: url('../assets/lognimg.png');
        background-size: cover;
        background-position: center;
    }

    .loginDiv {
        position: absolute;
        top: 68%;
        left: 28%;
    }

</style>